<template>
  <div>
    <el-card shadow="hover">
      <div class="box">
        <div class="btn-container">
          <el-button type="primary" class="full-width" @click="clearSearchForm">清空条件</el-button>
        </div>

        <div class="options-container">
          <!-- 咨询师姓名搜索 -->
          <el-input 
            v-model="state.searchForm.name" 
            clearable 
            placeholder="请输入咨询师姓名"
            class="full-width option"
          >
            <template #prefix>
              <el-icon><Search /></el-icon>
            </template>
          </el-input>
        </div>

        <div class="btn-container">
          <!-- 搜索按钮 -->
          <el-button 
            type="primary" 
            class="full-width" 
            @click="handleSearch"
          >
            搜索
          </el-button>
          
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue';
import { Search } from '@element-plus/icons-vue'
import type { QueryParams } from '@/api/counselor/types';

// 定义组件的自定义事件
const emit = defineEmits<{
  (e: 'update:SearchData', data: QueryParams): void
}>()

// 状态管理
const state = reactive({
  searchForm: {
    name: '',
  } as QueryParams
});

// 处理搜索
const handleSearch = () => {
  emit('update:SearchData', state.searchForm);
};

// 清空搜索条件
const clearSearchForm = () => {
  state.searchForm.name = '';
  handleSearch();
};
</script>

<style scoped>
.box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
  margin-bottom: 10px;
}

.full-width {
  width: 250px;
}

.btn-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 10px 0;
}

.options-container,
.option {
  margin: 10px 0;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .full-width {
    width: 100%;
  }

  .btn-container {
    width: 100%;
  }
}
</style>